<!--
 * @Description: 流程组件
 * @Author: DHL
 * @Date: 2022-09-14 11:09:34
 * @LastEditors: DHL
 * @LastEditTime: 2024-02-07 09:26:35
-->
<template>
  <div class="tw-flow-wrapper">
    <div class="flow_body" ref="bodyRef" :style="bodyStyle">
      <el-scrollbar height="100%">
        <!-- 业务内容 -->
        <div class="flow_body-main">
          <slot></slot>
        </div>

        <!-- 流程预览 -->
        <div class="approval-record_card">
          <div class="card-header">
            <span>{{ approvalTitle }}</span>
            <el-checkbox
              v-model="latestVersion"
              v-if="verifySubmit"
              label="加载流程最新版本"
              @change="handleProcessPreview"
            />
          </div>

          <div class="approval-record" v-if="userTaskList && userTaskList.length > 0">
            <el-skeleton :rows="5" animated :loading="loadingApproval" :throttle="500">
              <div class="timeline-wrapper">
                <el-timeline>
                  <template v-for="(item, index) in userTaskList">
                    <el-timeline-item
                      v-if="!item.documentMaking"
                      :timestamp="getNodeName(item)"
                      placement="top"
                      type="primary"
                      size="large"
                      icon="UserFilled"
                    >
                      <el-card shadow="hover" body-class="user-task-card_body">
                        <template v-if="item.assigneeList && item.assigneeList.length > 0">
                          <div
                            v-for="(userItem, userIndex) in item.assigneeList"
                            :key="userItem.id"
                            :class="`user ${userIndex > 0 ? 'mt10' : ''} ${getUserTaskClass(
                              userItem
                            )}`"
                          >
                            <div class="txt txt-1">
                              <!-- 审批通过 -->
                              <el-badge
                                value="✔"
                                type="primary"
                                v-if="['SP', 'WC'].includes(userItem.commentType)"
                              >
                                <el-tag type="primary" size="default">{{ userItem.name }}</el-tag>
                              </el-badge>
                              <!-- 默认 -->
                              <el-tag :type="getUserTaskTag(userItem)" size="default" v-else>
                                {{
                                  userItem.id === 'assigneeSystemDefaultUserId'
                                    ? '系统执行'
                                    : userItem.name
                                }}
                              </el-tag>
                            </div>
                            <div class="txt txt-2">
                              {{ userItem.state }}
                              <span v-if="userItem.state && userItem.endTime"> · </span>
                              <span v-if="userItem.endTime">{{ userItem.endTime }}</span>
                            </div>
                            <div class="txt txt-3">{{ userItem.commentMessage }}</div>

                            <!-- 历史操作记录 -->
                            <div
                              class="hicomment"
                              v-if="userItem.commentList && userItem.commentList.length > 0"
                            >
                              <div class="txt txt-4" v-for="comment in userItem.commentList">
                                <span> {{ comment.userName }} </span>
                                <span> · </span>
                                <span> {{ comment.message }} </span>
                                <span> · </span>
                                <tw-dic-name
                                  dicKey="FLOW_STATE"
                                  :dicValue="comment.type"
                                ></tw-dic-name>
                                <span> · </span>
                                <span> {{ comment.time }} </span>
                              </div>
                            </div>
                          </div>
                        </template>
                        <template v-else>
                          <template
                            v-if="
                              item.approvalRules &&
                              item.approvalRules.assignedRules.type !== 'optional'
                            "
                          >
                            <div class="msg-error">* 未查询到审批人，节点将自动完成</div>
                          </template>
                        </template>

                        <!-- 发起人自选 -->
                        <template
                          v-if="
                            item.approvalRules &&
                            item.approvalRules.assignedRules.type === 'optional'
                          "
                        >
                          <div
                            :class="`${
                              item.assigneeList && item.assigneeList.length > 0 ? 'mt10' : ''
                            }`"
                          >
                            <el-button
                              v-if="verifySelectUser"
                              type="primary"
                              plain
                              size="default"
                              title="选择用户"
                              style="width: 100%"
                              @click="handleSelectUserOpen({ type: 'optional', userTask: item })"
                            >
                              <SvgIcon iconClass="plus"></SvgIcon>
                            </el-button>
                          </div>
                        </template>
                      </el-card>
                    </el-timeline-item>
                  </template>
                </el-timeline>
              </div>
            </el-skeleton>
          </div>
          <div v-else>
            <el-empty description="请先配置流程" />
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- 底部操作按钮 -->
    <div class="flow_footer" ref="footerRef">
      <div class="opinion" v-if="verifyApproval">
        <el-input v-model="taskState.opinion" size="default" placeholder="请填写审批意见" />
      </div>

      <div class="btn-group">
        <!-- <el-button type="success" @click="handleOpenFlowChart"> 流程图 </el-button> -->

        <el-dropdown class="more-btns" placement="top" @command="handleMoreCommand">
          <el-button>
            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="flowChart">流程图</el-dropdown-item>

              <template v-if="action == 'add'" v-auth="`ACT-RE-MODEL-ADD`">
                <el-dropdown-item command="flowConfig"> 流程配置 </el-dropdown-item>
              </template>

              <template v-if="verifyApproval">
                <!-- <el-dropdown-item>加&nbsp;&nbsp;&nbsp;签</el-dropdown-item>
              <el-dropdown-item>减&nbsp;&nbsp;&nbsp;签</el-dropdown-item> -->
                <el-dropdown-item command="back">退&nbsp;&nbsp;&nbsp;回</el-dropdown-item>
                <el-dropdown-item command="delegate">委&nbsp;&nbsp;&nbsp;派</el-dropdown-item>
                <el-dropdown-item command="turn">转&nbsp;&nbsp;&nbsp;办</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-button @click="handleReset">取 消</el-button>

        <!-- 审批操作 -->
        <template v-if="verifyApproval">
          <!-- <el-button type="warning" @click="handleOpenBack"> 退 回 </el-button>

          <el-button type="success" @click="handleSelectUserOpen({ type: 'delegate' })">
            委 派
          </el-button>
          <el-button type="success" @click="handleSelectUserOpen({ type: 'turn' })">
            转 办
          </el-button> -->
          <el-button type="danger" @click="handleTaskReject"> 驳 回 </el-button>
          <el-button type="primary" @click="handleTaskComplete"> 同 意 </el-button>
        </template>

        <!-- 申请操作 -->
        <template v-if="verifyApplyFor">
          <el-button type="warning" v-if="verifyRevoke" @click="handleTaskRevoke">
            撤 回
          </el-button>
          <el-button type="primary" v-if="verifySubmit" :disabled="loading" @click="handleSubmit">
            提 交
          </el-button>
        </template>

        <slot name="footer"></slot>
      </div>
    </div>

    <!-- 选择用户 -->
    <selectUser ref="selectUserRef" @submit="handleSubmitSelectUser"></selectUser>

    <!-- 流程图 -->
    <twFlowchartPopup ref="twFlowchartPopupRef"></twFlowchartPopup>

    <!-- 退回 -->
    <twFlowBack ref="twFlowBackRef" @submit="handleSubmitBack"></twFlowBack>

    <!-- 流程配置 -->
    <twFlowConfig ref="twFlowConfigRef" @submit="handleProcessPreview"></twFlowConfig>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss"></style>
